<template>
<div class="LiveStreaming">
  <div > </div>
  <div class="LiveStreaming_g">
  <h2>直播课程</h2>

  <div class="LiveStreamingG" >
      <el-tabs :tab-position="tabPosition" style="height: 350px; width: 100%" v-model="name" >
        <el-tab-pane :name='index.toString()' v-for="(i,index) in LiveStreaming" :key="index" :label="i.course.courseTitle">
          <div class="backbox" >
          <p>{{i.course.courseTitle}}</p><img :src="i.course.coverFileUrl">
          </div>
        </el-tab-pane>
      </el-tabs>
  </div>
<!--    @mouseover="demo"-->
</div>

</div>
</template>

<script>
import {LiveStreaming} from "@/api/index-api";

export default {
  name: "LiveStreaming",
  data() {
    return {
      LiveStreaming: [],
      tabPosition: 'right',

name:"0"
    }
  },
  created() {
    LiveStreaming().then(res => {
      this.LiveStreaming = res.rows
    })
  }
  ,
  mounted: function () {
    let list = document.getElementsByClassName('el-tabs__item is-right ')
    setTimeout(() => {
      let that = this
      list.forEach((item, index) => {
        item.onmouseover = () => {
          that.name = index.toString()
        }
      })
    }, 1000)
  }
}


</script>

<style scoped lang="less">
.LiveStreaming{
    width: 100%;
    h2{
      width: 100%;
      margin:40px auto;
      text-align: center
    }
}
.LiveStreamingG{
  width: 1200px;
  height: 350px;
  display: flex;
  justify-content: space-between;
  }
  .LiveStreamingG{
    height: 100%;
    width: 100%;
  }
img{
  width: 100%;
  height: 350px;
  opacity: .7;
}
.backbox{
  display: flex;
  background-color: black ;
  z-index: 2;

  position: relative;
  p{
    position: absolute;
    top: 33%;
    width: 100%;
    //left: 36%;
  text-align: center;
    z-index: 4;
    color: #fff;
    font-size: 24px;
  }
}
.el-tabs--right .el-tabs__header.is-right{
  margin-left: -1px;
}
/deep/.el-tabs--right .el-tabs__header.is-right{
  width: 50%;
}
/deep/.el-tabs__item.is-active{
  color: #333;
}
/deep/.el-tabs__item:hover{
  background: #FFFFFF;
}
/deep/.el-tabs__nav-scroll{
  background:#f4f4f4;
}
/deep/.el-tabs--right /deep/.el-tabs__header.is-right{
  margin-left: 1px;
}
/deep/.el-tabs--right /deep/.el-tabs__nav-wrap.is-right {
  margin-left: -1px;
}

</style>